<template>
  <div class="add-course">
    <el-card>
      <template #header>
        <div class="card-header">
          <h3>新增课程</h3>
        </div>
      </template>

      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="100px"
      >
        <!-- 课程名称 -->
        <el-form-item label="课程名称" prop="courseName">
          <el-input
            v-model="formData.courseName"
            placeholder="请输入课程名称"
          />
        </el-form-item>

        <!-- 开课时间 -->
        <el-form-item label="开课时间" prop="startTime">
          <el-date-picker
            v-model="formData.startTime"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择开课时间"
            style="width: 100%"
          />
        </el-form-item>

        <!-- 最大选课人数 -->
        <el-form-item label="最大选课人数" prop="maxStudents">
          <el-input-number
            v-model="formData.maxStudents"
            :min="1"
            placeholder="请输入最大人数"
          />
        </el-form-item>

        <!-- 是否公开 -->
        <el-form-item label="是否公开" prop="isPublic">
          <el-switch
            v-model="formData.isPublic"
            active-value="true"
            inactive-value="false"
          />
        </el-form-item>

        <!-- 课程说明 -->
        <el-form-item
          label="课程说明"
          prop="description"
          style="align-items: flex-start"
        >
          <el-input
            v-model="formData.description"
            placeholder="课程说明"
            type="textarea"
          />
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">保存</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { courseApi } from "../../api/courseApi";

const router = useRouter();
const formRef = ref(null);

// 表单数据
const formData = reactive({
  courseName: "",
  startTime: "",
  maxStudents: 1000,
  isPublic: "false",
  description: "",
});

// 表单验证规则
const rules = {
  courseName: [
    { required: true, message: "请输入课程名称", trigger: "blur" },
    { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" },
  ],
  status: [{ required: true, message: "请选择课程状态", trigger: "change" }],
  // isPublic: [{ required: true, message: "请选择是否公开", trigger: "change" }],
};

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return;
  await formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const res = await courseApi.addCourse(formData);
        if (res.data.code === 1) {
          ElMessage.success("新增课程成功");
          router.push("/course/list");
        }
      } catch (error) {
        console.error("新增课程失败:", error);
      }
    }
  });
};

// 取消
const handleCancel = () => {
  router.back();
};
</script>

<style scoped>
.add-course{
  padding: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quill-editor {
  min-height: 200px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  width: 100%;
}
.quill-editor .ql-toolbar,
.quill-editor .ql-container {
  width: 100% !important;
  box-sizing: border-box;
}
.quill-editor .ql-editor {
  min-height: 150px;
  padding: 12px;
}
</style>
